<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Part 3 Example</title>
        <link rel="stylesheet" type="text/css" href="part3.css" />
        <script type="text/javascript" src="exampleutils.js"></script>
        <script type="text/javascript">
            // <![CDATA[

            /**
             * Requests table data for a specific page.
             * 
             * @param pageNum the page number to request data for
             */
            function getTableData(pageNum)
            {
                xmlGet('TableServlet?page=' + pageNum, tableResponseHandler);
            }


            // Immediately try to load the xsl file asynchronously
            var xsldocloaded = false;
            var xsldoc;
            
            if (window.XSLTProcessor)
            {
                // support Mozilla/Gecko based browsers
                xsldoc = document.implementation.createDocument("", "", null);
                xsldoc.addEventListener("load", onXslLoad, false);
                xsldoc.load("part3.xsl");
            }
            else if(window.ActiveXObject)
            {
                // support Windows / ActiveX
                xsldoc = new ActiveXObject("Microsoft.XMLDOM");
                xsldoc.ondataavailable = onXslLoad;
                xsldoc.load("part3.xsl");
            }
            
            function onXslLoad()
            {
                // flag that the xsl is loaded
                xsldocloaded = true;
            }

            /**
             * Handler for server's response to table requests.
             * Table content is pulled from response XML and a HTML
             * table is built.  The table is then inserted into the
             * 'tableSection' DIV.
             */
            function tableResponseHandler()
            {
                // Make sure the request is loaded (readyState = 4)
                if (req.readyState == 4)
                {
                    // Make sure the status is "OK"
                    if (req.status == 200)
                    {
                        // Make sure the XSL document is loaded
                        if (!xsldocloaded)
                        {
                            alert('Unable to transform data.  XSL is not yet loaded.');
                            // break out of the function
                            return;
                        }
                        
                        var swappableSection = document.getElementById('tableSection');
                        
                        if (window.XSLTProcessor)
                        {
                            // support Mozilla/Gecko based browsers
                            var xsltProcessor = new XSLTProcessor();
                            xsltProcessor.importStylesheet(xsldoc);
                            var outputXHTML = xsltProcessor.transformToFragment(req.responseXML, document);
                            swappableSection.innerHTML = "";
                            swappableSection.appendChild(outputXHTML);
                        }
                        else if(window.ActiveXObject)
                        {
                            // support Windows/ActiveX enabled browsers
                            var outputXHTML = req.responseXML.transformNode(xsldoc);
                            swappableSection.innerHTML = outputXHTML;
                        }
                    }
                    else
                    {
                        alert("There was a problem retrieving the XML data:\n" +
                            req.statusText);
                    }
                }
            }
            // ]]>
        </script>
    </head>
    <body>
        Page&nbsp;<a href="javascript: getTableData(1);">1</a>&nbsp;<a href="javascript: getTableData(2);">2</a>
        <br />
        <div style="border: 1px solid black; padding: 10px;" id="tableSection">&nbsp;</div>
    </body>
</html>